<template>
  <el-header style="background: #ff2d79; color: white;">
    <el-row align="middle" justify="space-between">
      <el-col :span="4">
        <div class="logo">
          <router-link to="/" class="logo-link">
            <!-- 使用logo.jpg图片 -->
            <img src="/images/logo.jpg" alt="大麦网" class="logo-img" />
            <span class="logo-text">大麦网</span>
          </router-link>
        </div>
      </el-col>
      <el-col :span="12">
        <el-menu
          mode="horizontal"
          background-color="#ff2d79"
          text-color="white"
          active-text-color="#ffeb3b"
          :default-active="$route.path"
          router
        >
          <el-menu-item index="/">首页</el-menu-item>
          <el-menu-item index="/events">演出</el-menu-item>
          <el-menu-item index="/venues">场馆</el-menu-item>
          <el-menu-item index="/orders" v-if="isLoggedIn">我的订单</el-menu-item>
          <!-- 管理员菜单 -->
          <el-sub-menu index="/admin" v-if="user?.is_admin">
            <template #title>
              <span>管理中心</span>
            </template>
            <el-menu-item index="/admin/events">管理演出</el-menu-item>
            <el-menu-item index="/admin/venues">管理场馆</el-menu-item>
            <el-menu-item index="/admin/users">管理用户</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-col>
      <el-col :span="4">
        <div class="user-info">
          <el-button v-if="!isLoggedIn" @click="$router.push('/login')">登录</el-button>
          <el-dropdown v-else>
            <span class="el-dropdown-link">
              {{ user?.username }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                <!-- 只有非管理员用户才能看到注销选项 -->
                <el-dropdown-item v-if="user && !user.is_admin" @click="confirmDeleteAccount" danger>注销账号</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-badge :value="cartCount" class="cart-badge">
            <router-link to="/orders">
              <el-button circle>
                <el-icon><shopping-cart /></el-icon>
              </el-button>
            </router-link>
          </el-badge>
        </div>
      </el-col>
    </el-row>
  </el-header>
</template>

<script>
import { mapState, mapGetters } from 'pinia'
import { useAppStore } from '../store'
import { ArrowDown, ShoppingCart } from '@element-plus/icons-vue'

export default {
  components: {
    ArrowDown,
    ShoppingCart
  },
  computed: {
    ...mapState(useAppStore, ['user']),
    ...mapGetters(useAppStore, ['cartCount', 'isLoggedIn'])
  },
  methods: {
      logout() {
        // 调用后端登出API
        import('../api').then(api => {
          api.default.post('/auth/logout')
            .catch(() => {
              // API调用失败也继续本地登出流程
            })
            .finally(() => {
              // 清除本地登录状态
              localStorage.removeItem('token')
              // 清除购物车数据
              this.$store.clearCart()
              this.$store.setUser(null)
              this.$router.push('/')
              this.$message.success('退出登录成功')
              // 刷新页面
              window.location.reload()
            })
        })
      },
      
      // 确认注销账号
      confirmDeleteAccount() {
        this.$confirm('确定要注销您的账号吗？此操作不可撤销，您的所有数据将会被删除。', '注销账号', {
          confirmButtonText: '确定注销',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteAccount()
        }).catch(() => {
          // 取消注销
        })
      },
      
      // 执行注销账号操作
      deleteAccount() {
        import('../api').then(api => {
          api.default.delete('/users/delete-account')
            .then(() => {
              // 清除本地登录状态
              localStorage.removeItem('token')
              // 清除购物车数据
              this.$store.clearCart()
              this.$store.setUser(null)
              this.$router.push('/')
              this.$message.success('账号注销成功')
              // 刷新页面
              window.location.reload()
            })
            .catch((error) => {
              console.error('注销账号失败:', error)
              this.$message.error(error.response?.data?.error || '注销账号失败，请稍后重试')
            })
        })
      }
  }
}
</script>

<style scoped>
.logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: white;
  gap: 10px;
  height: 60px;
}

.logo-img {
  height: 35px;
  width: auto;
  border-radius: 4px;
}

.logo-text {
  font-size: 20px;
  font-weight: bold;
  margin: 0;
}

.user-info {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.cart-badge {
  margin-left: 10px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .logo-text {
    font-size: 18px;
  }
  
  .logo-img {
    height: 30px;
  }
}
</style>